<template>
  <a-card class="userPassGoods">
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 60 }">
      <a-row :gutter="24">
        <a-col :lg="24" :md="24" :sm="24">
          <a-card class="card" title="小组通过商品列表" :bordered="false">
            <div class="userbox">
              <ul class="siderBar" @click="letterChange">
                <li v-for="item in letterList" :key="item.id">
                  <input
                    class="radio"
                    :id="item.letter"
                    type="radio"
                    name="letter"
                    :value="item.letter"
                    v-model="letter" />
                  <label :for="item.letter" style="cursor:pointer">{{ item.letter }}</label>
                </li>
              </ul>
              <div class="leftgroup">
                <div class="scrollBox" id="scrollBox">
                  <ul style="padding-left:0" @click="userChange">
                    <li>
                      <input
                        class="radio"
                        id="a"
                        type="radio"
                        name="radios"
                        value="a"
                        v-model="radio" />
                      <label for="a" style="cursor:pointer">全部组员</label>
                    </li>
                    <li v-for="item in userList" :key="item.id">
                      <input
                        class="radio"
                        :id="item.id"
                        type="radio"
                        name="radios"
                        :value="item.id"
                        v-model="radio" />
                      <label :for="item.id" :class="item.firstWord" style="cursor:pointer">{{ item.user }}</label>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="rightTab">
                <a-form style="margin-left:20px;" @submit="handleSubmit" :form="form" class="form">
                  <a-row class="form-row" :gutter="24">
                    <a-col :lg="3" :md="8" :sm="24">
                      <a-form-item>
                        <a-select defaultValue="6" @change="todayChange">
                          <a-select-option value="1">本周</a-select-option>
                          <a-select-option value="2">上周</a-select-option>
                          <a-select-option value="3">本月</a-select-option>
                          <a-select-option value="4">上月</a-select-option>
                          <a-select-option value="5">半年</a-select-option>
                          <a-select-option value="6">今天</a-select-option>
                          <a-select-option value="7">昨天</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col :lg="3" :md="8" :sm="24">
                      <a-form-item>
                        <a-input v-model="skuid" placeholder="商品ID 选填" />
                      </a-form-item>
                    </a-col>
                    <a-col :lg="3" :md="8" :sm="24">
                      <a-form-item>
                        <a-input v-model="shop_name" placeholder="店铺名称 选填" />
                      </a-form-item>
                    </a-col>
                    <a-col :lg="2" :md="8" :sm="24">
                      <a-form-item>
                        <a-button htmlType="submit" type="primary">查找商品</a-button>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
                <div class="scrollBox">
                  <a-table
                    style="margin-left:20px;margin-bottom:60px;margin-right:20px"
                    :columns="columns"
                    :rowKey="orderList =>orderList.jdg_id"
                    :dataSource="orderList"
                    :loading="loading"
                    :pagination="pagination"
                    @change="handleTableChange">
                    <div slot="detailInfo" slot-scope="row">
                      <div class="ant-list-item-meta">
                        <div class="ant-list-item-meta-avatar">
                          <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                            <img :src="'https://img14.360buyimg.com/n1/'+row.jdg_image_url" />
                          </span>
                        </div>
                        <div class="ant-list-item-meta-content">
                          <div class="ant-list-item-meta-description">
                            <a target="_blank" :href="'//item.jd.com/'+row.jdg_sku_id+'.html'">
                              <span class="detail-name">{{ row.jdg_sku_name }}</span>
                            </a>
                            <span style="color:#000">￥{{ row.jdg_price }}</span>
                            <span style="margin-left:20px">{{ row.jdg_shop_name }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div slot="time" slot-scope="row">
                      起:{{ row.jdg_start_time }}
                      <br />
                      止:{{ row.jdg_end_time }}
                    </div>
                    <span slot="finalRate" slot-scope="row">
                      <!-- 原: -->
                      {{ row.jdg_commission_rate }}%
                      <!-- <br/>
                      新:{{ row.jdg_new_rate }}% -->
                    </span>
                    <span slot="serviceRate" slot-scope="row">{{ row.jdg_service_rate }}%</span>
                    <!-- <span slot="skuNum" slot-scope="row">{{ row.jdo_sku_num }}</span> -->
                    <!-- <span slot="cosPrice" slot-scope="row">￥{{ row.jdo_estimate_cos_price }}</span> -->
                    <!-- <span slot="cosComm" slot-scope="row">￥{{ row.jdo_estimate_commission }}</span> -->
                  </a-table>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-skeleton>
  </a-card>
</template>

<script>

// import { memberList, getPassHead } from '@/api/local/headman'
import { memberList, getPassHead } from '@/api/headman'

import vPinyin from '@/assets/js/vue-py.js'
const columns = [
  {
    title: '姓名',
    width: 150,
    dataIndex: 'user',
    scopedSlots: {
      customRender: 'user'
    }
  },
  {
    title: '商品信息',
    width: 500,
    scopedSlots: {
      customRender: 'detailInfo'
    }
  },
  {
    title: '参与时间',
    scopedSlots: {
      customRender: 'time'
    }
  },
  //   {
  //     title: '预估金额',
  //     scopedSlots: {
  //       customRender: 'cosPrice'
  //     }
  //   },
  //   {
  //     title: '预估佣金',
  //     scopedSlots: {
  //       customRender: 'cosComm'
  //     }
  //   },
  {
    title: '服务费率',
    scopedSlots: {
      customRender: 'serviceRate'
    }
  },
  {
    title: '佣金比例',
    scopedSlots: {
      customRender: 'finalRate'
    }
  }

]
export default {
  name: 'UserPassGoods',
  data () {
    return {
      passName: '',
      radio: 'a',
      description: '显示小组所有通过商品列表.',
      skeLoading: true,
      value: 1,
      // form
      form: this.$form.createForm(this),
      columns,
      pagination: {},
      loading: false,
      orderList: [],
      userList: [],
      values: {
        passName: undefined,
        time: '6',
        skuid: '',
        shop_name: ''
      },
      time: '6',
      sort: '1',
      skuid: '',
      shop_name: '',
      idd: '',
      pinYin: [],
      letter: '',
      letterList: [{
        id: 1,
        letter: 'A'
      }]
    }
  },
  created () {
    // this.idd = this.$route.query.id
    // console.log('this.$route.query.id', this.$route.query.id)
    this.memberList()
    this.getPassHead({
      passName: undefined,
      time: this.time
    //   sort: this.sort,
    })
  },
  mounted () {
  },
  methods: {
    letterChange (e) {
      window.event ? window.event.cancelBubble = true : e.stopPropagation()
      if (e.target.nodeName.toLowerCase() === 'input') {
        console.log('e.target.value', e.target.value)
        const letter = e.target.value.toString()
        var checkBox = document.getElementsByClassName(letter)[0]
        var scrollBox = document.getElementById('scrollBox')
        console.log('ref', checkBox.offsetTop)
        console.log('scrollBox', scrollBox.scrollTop)
        scrollBox.scrollTop = checkBox.offsetTop
      }
    },
    userChange (e) {
      this.passName = ''
      this.time = '6'
      this.shop_name = ''
      this.skuid = ''
      if (e.target.nodeName.toLowerCase() === 'input') {
        if (e.target.id !== 'a') {
          this.idd = e.target.id
          var filterArr = this.userList.filter(e => e.id === parseInt(this.idd))
          console.log('filterArr', filterArr[0])
          this.passName = filterArr[0].user
          this.getPassHead({
            passName: this.passName,
            time: this.time
          }
          )
        } else {
          this.passName = ''
          this.getPassHead({
            passName: undefined,
            time: this.time
          })
        }
      }
    },
    memberList () {
      memberList({})
        .then(res => {
          // console.log('员工列表', res.result)
          this.userList = res.result
          const pinYin = []
          const array = []
          this.userList.map(e => {
            pinYin.push(e.user)
            return pinYin
          })
          this.userList.map((item, index) => {
            array.push(
              Object.assign({}, item, {
                initial: '',
                rankingnum: '',
                firstWord: ''
              })
            )
            return array
          })
          // console.log('pinYin', pinYin)
          // console.log('array', array)
          for (var j = 0; j < pinYin.length; j++) {
            this.pinYin = vPinyin.chineseToPinYin(pinYin[j])
            // console.log('小写', this.pinYin)
            let SX = ''
            for (var i = 0; i < this.pinYin.length; i++) {
              var c = this.pinYin.charAt(i)
              if (/^[A-Z]+$/.test(c)) {
                SX += c
              }
            }
            let firstWord = ''
            var b = this.pinYin.charAt(0)
            if (/^[A-Z]+$/.test(b)) {
              firstWord += b
            }
            array[j].initial = SX
            array[j].rankingnum = SX.substring(0).charCodeAt().toString() + SX.substring(1).charCodeAt().toString()
            array[j].firstWord = firstWord
            // console.log('大写', SX)
          }
          // console.log('array', array)
          this.userList = array
          var compare = function (obj1, obj2) {
            var val1 = obj1.rankingnum
            var val2 = obj2.rankingnum
            if (val1 < val2) {
              return -1
            } else if (val1 > val2) {
              return 1
            } else {
              return 0
            }
          }
          this.userList = this.userList.sort(compare)
          this.letterList = this.userList.map(function (obj) {
            var rObj = {}
            rObj.id = obj.id
            rObj.letter = obj.firstWord
            return rObj
          })
          var array1 = []
          var obj = {}
          for (var a = 0; a < this.letterList.length; a++) {
            if (!obj[this.letterList[a].letter]) {
              array1.push(this.letterList[a])
              obj[this.letterList[a].letter] = true
            }
          }
          this.letterList = array1
          // console.log(array1)
          // console.log('this.letterList', this.letterList)
        })
        .catch(err => {
          console.log(err)
        //   this.loading = false
        })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.values.passName = this.passName
      this.values.time = this.time
      this.values.shop_name = this.shop_name
      this.values.skuid = this.skuid
      this.values.pageSize = 15
      this.values.page = 1
      this.pagination.current = 1
      // this.values.sort = this.sort
      // console.log('values', this.values)
      this.getPassHead(this.values)
    },
    todayChange (value) {
      this.time = value
    },
    typeChange (value) {
      this.sort = value
    },
    handleTableChange (pagination, filters, sorter) {
      const param = this.values
      param.pageSize = pagination.pageSize
      param.page = pagination.current
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.getPassHead(this.values)
    },
    getPassHead (parameter) {
      this.loading = true
      // console.log('parameter', parameter)
      getPassHead(parameter)
        .then(res => {
          this.skeLoading = false
          // console.log('通过商品列表', res.result)
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.result.total
          pagination.pageSize = res.result.per_page
          // pagination.pageSize = 3
          pagination.page = res.result.page
          this.pagination = pagination
          this.orderList = res.result.data
          this.loading = false
        })
        .catch(() => {
          this.skeLoading = false
          this.loading = false
        })
    }

  }
}
</script>
<style lang="less" scoped>
  ul li {
    list-style: none;
  }

  .userPassGoods {
    .userbox {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;

      .siderBar {
        display: inline-block;
        position: absolute;
        left: -80px;
        top: 20px;

        input {
          display: none;
        }

        label {
          text-align: center;
          display: inline-block;
          width: 25px;
          height: 20px;
          border: none;
          // height: 50px;
          line-height: 20px;
          text-align: center;
          border-radius: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        input:checked+label {
          font-size: 20px;
          background-color: rgb(42, 86, 206);
          color: white;
        }
      }
      .scrollBox {
        overflow-y: auto;
        height: 100%;
        width: calc(100% + 20px);
      }

      .leftgroup {
        width: 10%;
        height: 800px;
        overflow: hidden;
        background-color: #fff;
        border-right: 1px solid rgb(202, 199, 199);
        input {
          display: none;
        }

        label {
          display: inline-block;
          width: 80%;
          border: none;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        input:checked+label {
          background-color: rgb(42, 86, 206);
          color: white;
        }

      }
    }

    .rightTab {
      width: 90%;
      height: 800px;
      overflow: hidden;
    }
  }

  .detail-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 16px;
    margin-bottom: 5px;
  }

  @media screen and (max-width:1200px) {
    .userPassGoods {
      .userbox {
        width: 100%;
        display: block;

        .siderBar {
          display: none;
        }

        .leftgroup {
          width: 100%;
          height: 100%;
          border-right: none;

          ul {
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            li {
              width: 80px;
                height: 40px;

              label {
                width: 80px;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }

        .rightTab {
          width: 90%;
        }
      }
    }
  }
</style>>
